<!--
 * @Date: 2022-02-24 19:09:42
 * @Author: 陶子
 * @LastEditTime: 2023-06-12 14:26:05
 * @FilePath: \jk_one-stop_pc\src\views\workManagement\workOrder\workOrderDetail.vue
 * @pageName: 这是--(报工详情)--页面
-->
<template>
  <jke-modal
    :visible.sync="jkeForm.visible"
    :width="1200"
    :title="jkeForm.title"
    :fullscreen.sync="jkeForm.fullscreen"
    :switchFullscreen="jkeForm.switchFullscreen"
  >
    <div class="page-scroll-wrap">
      <a-card title="" :bordered="false" style="margin-top: 12px">
        <div class="box">
          <div class="box-column">
            <div class="boeay">
              <div>工单编号</div>
              <p>{{ datilForm.orderCode || '-' }}</p>
            </div>
            <div class="boeay">
              <div>工序</div>
              <p>{{ datilForm.processesCode + '|' + datilForm.processesName || '-' }}</p>
            </div>
            <div class="boeay">
              <div>任务时间</div>
              <p>{{ datilForm.planStartTime + '~' + datilForm.planEndTime || '-' }}</p>
            </div>
          </div>
          <div class="box-column">
            <div class="boeay">
              <div>关联订单</div>
              <p>{{ datilForm.saleOrderCode || '-' }}</p>
            </div>
            <div class="boeay">
              <div>生产状态</div>
              <p :style="{ color: StatusColor(datilForm.orderStatus) }">
                {{ TextStatus(datilForm.orderStatus) || '-' }}
              </p>
            </div>
            <div class="boeay">
              <div>计划数</div>
              <p>{{ datilForm.planProduceNum || '-' }}</p>
            </div>
          </div>
          <div class="box-column">
            <div class="boeay">
              <div>生产物品信息</div>
              <p>{{ goodsNames || '-' }}</p>
            </div>
            <div class="boeay"></div>
            <div class="boeay">
              <div>任务进度</div>

              <p>{{ datilForm.reportNum || 0 }} / {{ datilForm.planProduceNum || '-' }}</p>
              <a-progress :percent="Math.floor((datilForm.reportNum / datilForm.planProduceNum) * 100)" />
            </div>
          </div>
          <div class="box-column qr">
            <div style="width: 120px">
              <vue-qr
                :text="JSON.stringify({ id: datilForm.id, EntityType: 'workOrder' })"
                :size="120"
                :margin="0"
              ></vue-qr>
            </div>
          </div>
        </div>
      </a-card>
      <a-card title="" :bordered="false" style="margin-top: 12px; flex: 1; margin-bottom: 12px">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" tab="报工信息">
            <div class="body-box">
              <div class="num">
                <div class="box-num">
                  <div class="topnum">报工数</div>
                  <div class="bomnum">{{ workOrderInfo.reportNum }}</div>
                </div>
                <div class="box-num">
                  <div class="topnum">合格数</div>
                  <div class="bomnum">{{ workOrderInfo.qualifiedNum }}</div>
                </div>
                <div class="box-num">
                  <div class="topnum">不合格数</div>
                  <div class="bomnum">{{ workOrderInfo.unqualifiedNum }}</div>
                </div>
              </div>
              <div class="body-table">
                <a-table :scroll="{ x: scrollX }" :pagination="false" :columns="columns" :data-source="dataList">
                  <a slot="index" slot-scope="text, scoped, index">{{ index + 1 }}</a>
                  <a slot="baognum" slot-scope="text">{{
                    workOrderInfo.qualifiedNum + workOrderInfo.unqualifiedNum || '-'
                  }}</a>
                </a-table>
                <div class="uni-card parion" :style="{ left: collapsed ? '219px' : '90px' }">
                  <div class="check-contain">
                    <span>
                      {{ `共 ${total} 条` }}
                    </span>
                  </div>
                  <div class="page-contain">
                    <a-pagination
                      :total="total"
                      v-model="current"
                      :page-size-options="pageSizeOptions"
                      :page-size="pageSize"
                      @change="onChangePage"
                      @showSizeChange="onShowSizeChange"
                      show-quick-jumper
                      show-size-changer
                    />
                  </div>
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="自定义信息">
            <div class="item-wrap" style="box-sizing: border-box; padding: 0 4px; height: 500px; overflow-y: auto">
              <div class="uni-card" v-if="datilForm.extDataJson">
                <div class="item-wrap1">
                  <div
                    class="detail-item"
                    style="width: 33%"
                    v-for="(item, index) in formTypeExtendedFields"
                    :key="index"
                  >
                    <p class="subtitle">{{ item.fieldName }}</p>
                    <p class="secondary-text">{{ datilForm.extDataJson[item.fieldKey] || '-' }}</p>
                  </div>
                  <div
                    class="detail-item"
                    style="width: 33%"
                    v-for="(item, index) in formTypeExtendedFields.length % 3"
                    :key="index"
                  ></div>
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </div>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import vueQr from 'vue-qr'
import FileDetail from '@/components/fileActions/FileDetail'
import { numFormat } from '@/utils/util'
import { productionReportingDetail } from '@/api/produce/index'
import { getFileListByIds } from '@/api/produce/productionManage'
import { mapState } from 'vuex'
import { APILX } from '@/api/requestLx'
const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    scopedSlots: { customRender: 'index' },
  },
  {
    title: '报工数量',
    dataIndex: 'baognum',
    key: 'baognum',
    scopedSlots: { customRender: 'baognum' },
  },
  {
    title: '合格数',
    dataIndex: 'qualifiedNum',
    key: 'qualifiedNum',
    // width: 80,
  },
  {
    title: '不合格数',
    dataIndex: 'unqualifiedNum',
    key: 'unqualifiedNum',
    ellipsis: true,
  },
  {
    title: '计件单价',
    dataIndex: 'pieceRate',
    key: 'pieceRate',
    ellipsis: true,
  },
  {
    title: '计件工资',
    dataIndex: 'totalSalary',
    key: 'totalSalary',
    ellipsis: true,
  },
  {
    title: '操作人 ',
    dataIndex: 'userText',
    key: 'userText',
    ellipsis: true,
  },
  {
    title: '报工时间',
    dataIndex: 'reportTime',
    key: 'reportTime',
    ellipsis: true,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    ellipsis: true,
  },
  {
    title: '更新时间  ',
    dataIndex: 'updateTime',
    key: 'updateTime',
    ellipsis: true,
  },
  {
    title: '创建人',
    dataIndex: 'createBy',
    key: 'createBy',
    ellipsis: true,
  },
  {
    title: '更新人',
    dataIndex: 'updateBy',
    key: 'updateBy',
    ellipsis: true,
  },
]

export default {
  data() {
    return {
      goodsNames: '',
      formTypeExtendedFields: [],
      dataList: [],
      columns,
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      current: 1,
      total: 0,
      pageSize: 10,
      jkeForm: {
        title: '任务详情',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      taskId: '',
      datilForm: {
        orderCode: '',
        processesCode: '',
        processesName: '',
        planStartTime: '',
        planEndTime: '',
        saleOrderCode: '',
        orderStatus: '',
        planNum: '',
        serialCode: '',
        serialName: '',
        serialSpecifications: '',
      },
      workOrderInfo: {
        reportNum: '',
        qualifiedNum: '',
        unqualifiedNum: '',
        dataSource: [],
      },
    }
  },
  components: {
    crumbs,
    FileDetail,
    vueQr,
  },
  watch: {
    'jkeForm.visible': function (val) {
      if (!val) {
        this.$emit('cancel')
      }
    },
  },
  computed: {
    ...mapState({
      collapsed: (state) => state.user.collapsedAno,
    }),
    scrollX() {
      let xnum = 0
      for (let item of this.columns) {
        xnum += Number(item.width) || 0
      }
      return xnum
    },
  },
  mounted() {
    // this.jkeForm.visible = true
  },
  methods: {
    StatusColor(orderStatus) {
      if (orderStatus == 0) {
        return '#FF943E'
      }
      if (orderStatus == 1) {
        return '#1890FF'
      } else if (orderStatus == 2) {
        return '#15BC83'
      } else if (orderStatus == 3) {
        return '#EEEEEE'
      }
    },
    TextStatus(orderStatus) {
      if (orderStatus == 0) {
        return '未开始'
      } else if (orderStatus == 1) {
        return '生产中'
      } else if (orderStatus == 2) {
        return '已完成'
      } else if (orderStatus == 3) {
        return '已取消'
      }
    },
    // 分页
    onChangePage(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.tablePage()
    },
    onShowSizeChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.tablePage()
    },
    async initDetail(query) {
      this.jkeForm.visible = true
      this.taskId = query.id
      this.getDetail(query)
      this.tablePage()
      let res = await APILX.formTypeExtendedFieldList({ formType: 4 })
      if (res.code == 200 && res.result) {
        let typeExtendedFields = res.result
        let column = []
        typeExtendedFields.forEach((fields) => {
          let tableHead = {
            title: fields.fieldName,
            dataIndex: 'extDataJson.' + fields.fieldKey,
            ellipsis: true,
            width: 150,
            searchIndex: 'extDataJson.' + fields.fieldKey,
          }
          column.push(tableHead)
        })
        this.columns = [...columns, ...column]
      }
    },

    getDetail(query) {
      APILX.formTypeExtendedFieldList({ formType: 7 }).then((res) => {
        if (res.code == 200 && res.result) {
          this.formTypeExtendedFields = res.result
        }
      })
      getFileListByIds({ id: query.id }).then((res) => {
        if (res.code == 200) {
          console.log(res, '22222222222')
          this.datilForm = res.result
          this.goodsNames = `${res.result.serialCode || '-'}|${res.result.serialName || '-'}|${
            res.result.serialSpecifications || '-'
          }`
        }
      })
    },
    tablePage() {
      let param = {
        taskId: this.taskId,
        pageNo: this.current,
        pageSize: this.pageSize,
      }
      productionReportingDetail(param).then((res) => {
        if (res.code == 200) {
          this.workOrderInfo.reportNum = res.result.reportCountNum
          this.workOrderInfo.qualifiedNum = res.result.qualifiedCountNum
          this.workOrderInfo.unqualifiedNum = res.result.unqualifiedCountNum
          this.dataList = res.result.pageInfo.records
          this.dataList = res.result.pageInfo.records.map((ele) => {
            let newkey = ''
            let newObj = {}
            for (const key in ele.extDataJson) {
              newkey = key
              newObj[newkey] = ele.extDataJson[key]
            }
            return {
              ...ele,
              ...newObj,
            }
          })

          this.total = res.result.pageInfo.total
        } else {
          this.$antdMessage.warning(res.message)
        }
      })
    },
  },
}
</script>
<style scoped lang="less">
.box {
  display: flex;
  align-items: center;
  width: 100%;
  height: 206px;

  .box-column {
    flex: 1;
    height: 100%;

    .boeay {
      margin: 20px 0;
    }
  }

  .qr {
    flex: 0.5;
    display: flex;
    justify-content: end;
  }
}

.body-box {
  background: #f6f6f6;

  .num {
    display: flex;
    background: white;

    .box-num {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: 206px;
      border-right: 1px solid #e8e8e8;

      &:last-child {
        border-right: none;
      }

      .topnum {
        font-size: 16px;
        font-weight: bold;
      }

      .bomnum {
        margin-top: 15px;
        font-size: 24px;
      }
    }
  }

  .body-table {
    background: white;
    margin-top: 10px;
  }
}

.parion {
  padding: 15px 12px 6px 43px;
  text-align: right;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.itemBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;

  img {
    width: 16px;
    height: 16px;
    margin-right: 10px;
  }
}

.item-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.item-wrap1 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
}

.item-wrap:nth-of-type(n + 2) {
  margin-top: 40px;
}

.detail-item {
  width: 30%;
}

.uni-card {
  padding: 24px 40px;
  margin: -12px -12px 0;
  background: #fff;
}

.cards-box {
  // height: calc(100vh - 300px);
  // overflow-y: scroll;
  margin-bottom: 20px;
}

.pic-f {
  display: flex;
  padding: 10px;
  flex: 1;

  .pic-l {
    display: inline-block;
    margin-right: 14px;
  }

  .pic-r {
    flex-direction: column;
    justify-content: space-between;
    display: inline-block;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #444444;
  }
}

.imgClass {
  width: 60px;
  height: 60px;
  border-radius: 6px;
}

.fiexBox {
  position: absolute;
  top: 15px;
  right: -5px;
}

.subtitle {
  min-width: 200px;
}

/deep/.ant-modal-body {
  height: calc(100vh - 55px) !important;
  .page-scroll-wrap {
    height: calc(100vh - 55px);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
  }
}
</style>
